<template>
  <div class="tiaoxuan_right">
    <div class="car_div" v-for="(item, index) in this.$store.state.list_r" :key="index">
      <h1>{{ item.carname }}</h1>
      <h1 v-show="isshow">{{ url }}</h1>
      <div class="ul_twice">
        <ul class="xuan_ul1">
          <li @click="go_detail(item)">
            <img :src="item.coverImg" alt="" />
          </li>
          <li>{{ item.speedBox }}  {{item.intro}}</li>
          <li @click="todetail(item)"><van-icon name="good-job" />车辆详情</li>
        </ul>
        <ul class="xuan_ul2">
          <li>
            <span>{{ item.price }}</span
            >/<span>天起</span>
          </li>
          <li><span>砍</span><span>￥400</span></li>
          <li>3个车行<van-icon name="arrow-down" /></li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import { right } from "../../../request/select_car/select_car";
export default {
  props: {
    url: {
      type: String,
    },
  },
  beforeUpdate() {
    this.list_r = this.$store.state.list_r;
  },

  mounted() {
    this.list_r = this.$store.state.list_r;
  },
  data() {
    return {
      isshow: false,
      list_r: [],
    };
  },
  methods: {
    go_detail(v) {
      this.$store.state.carinfo = v;
      this.$router.push("/dingdanxiangqing");
    },
    // 跳转详情
    todetail(v) {
      console.log("跳转详情")
    },
  },
  components: {},
  destroyed() {
    this.list_r = [];
  },
  // watch: {
  //   //监听路由变化
  //   $route(to, from) {
  //     // console.log( to , from );
  //     // to , from 分别表示从哪跳转到哪，都是一个对象
  //     // to.path  ( 表示的是要跳转到的路由的地址 eg: /home );
  //     let path = to.path;
  //     let id = path.substring(path.lastIndexOf("/") + 1);
  //     right({
  //       shopId: this.$store.state.brrowShop,
  //       type: id,
  //       selectId:this.$store.state.condition
  //     }).then((res) => {
  //       this.$store.state.list_r = res;
  //       this.list_r = res;
  //       console.log(res)
  //     });
  //   },
  // },
};
</script>

<style scoped lang="less">
.tiaoxuan_right {
  width: 5.78rem;
  height: 12.28rem;
  .car_div {
    width: 100%;
    height: 4.18rem;
    background: white;
    border-radius: 0.08rem;
    padding-top: 0.3rem;
    margin-bottom: 0.15rem;
    h1 {
      font-size: 0.26rem;
      font-weight: 600;
      width: 100%;
      height: 0.5rem;
      padding-left: 0.49rem;
    }
    .ul_twice {
      width: 100%;
      height: 3.2rem;
      display: flex;
      .xuan_ul1 {
        flex: 3;
        li:nth-child(1) {
          width: 100%;
          img {
            width: 3.56rem;
            height: 1.79rem;
            margin-left: 0.24rem;
          }
        }
        li:nth-child(2) {
          width: 96%;
          font-size: 0.23rem;
          color: #8d8d8d;
          padding-left: 0.47rem;
          margin-top: 0.1rem;
        }
        li:nth-child(3) {
          width: 1.63rem;
          height: 0.37rem;
          margin: 0.24rem 0 0.2rem 0.47rem;
          border-radius: 0.06rem;
          background: linear-gradient(to right, #ffaa41 0%, #ff8927 100%);
          color: white;
          font-size: 0.2rem;
          display: flex;
          align-items: center;
          i {
            margin: 0 0.06rem;
          }
        }
      }
      .xuan_ul2 {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding-bottom: 0.6rem;
        padding-right: 0.2rem;
        li:nth-child(1) {
          font-size: 0.26rem;
          span:first-child {
            font-size: 0.31rem;
            color: #f0230e;
            font-weight: 600;
          }
          span:last-child {
            font-size: 0.21rem;
            font-weight: 100;
          }
        }
        li:nth-child(2) {
          width: 0.97rem;
          height: 0.32rem;
          border: 0.02rem solid #f0230e;
          border-radius: 0.03rem;
          margin: 0.1rem;
          span:first-child {
            display: inline-block;
            width: 0.31rem;
            height: 0.32rem;
            font-size: 0.22rem;
            color: white;
            text-align: center;
            line-height: 0.3rem;
            background: #f0230e;
            position: relative;
            top: -0.04rem;
            left: -0.01rem;
          }
          span:last-child {
            width: 0.62rem;
            height: 100%;
            display: inline-block;
            font-size: 0.18rem;
            color: #f0230e;
            font-weight: 600;
            line-height: 0.32rem;
            position: relative;
            top: -0.04rem;
            left: -0.03rem;
            text-align: center;
          }
        }
        li:last-child {
          font-size: 0.2rem;
          color: #f0230e;
          background: #fff7f5;
          width: 1.23rem;
          height: 0.4rem;
          line-height: 0.4rem;
          display: flex;
          justify-content: space-evenly;
          i {
            font-size: 0.25rem;
            position: relative;
            top: 0.06rem;
          }
        }
      }
    }
  }
}
</style>
